<template>
  <div @mouseover="stop = true" @mouseout="stop = false" class="dragswiper">
    <!-- 轮播图 -->
    <common-swiper
      :dragValue="dragValue"
      :stop="stop"
      :moving="true"
      :width="198"
      :count="5"
      :data="data"
    >
      <!-- 定义每个格子里的样式 -->
      <template v-slot:default="data">
        <img :src="data.data.image" alt>
        <p>{{data.data.goods_name}}</p>
      </template>
    </common-swiper>
    <!-- 拖拽进度条 -->
    <drag-bar @value="onValue"/>
  </div>
</template>

<script>
import DragBar from '~/components/DragBar'
import CommonSwiper from '~/components/CommonSwiper'

export default {
  components: {
    DragBar,
    CommonSwiper
  },
  props: {
    data: {
      type: Array,
      required: false
    }
  },
  data() {
    return {
      stop: false, // 加个锁 当鼠标在拖拽滚动条的时候 轮播图不能再自行移动
      dragValue: 0 // 拖拽条的值 
    }
  },
  methods: {
    onValue(value) {
      // 获取 拖拽元素 相对于滚动条 移动的百分比
      this.dragValue = value
      // console.log(this.dragValue)
    }
  },
}
</script>

<style lang="scss">
  .dragswiper {
    padding: 20px 0;
    text-align: center;
    background: #fff;
    &:hover {
      .dragbar {
        opacity: 1;
      }
    }
    .dragbar {
      margin-top: 20px;
      transition: all 0.5s;
      opacity: 0;
      // background: #000;
    }
  }
</style>